<template>
    <div>
        <h1>生命周期</h1>
        <p>{{name}}</p>
        <button @click="changeName">edit name</button>
        <router-link to="/index">跳转到index页面</router-link>

        <hr>

        <hello-world></hello-world>
    </div>
</template>

<script lang='ts'>
import {
    defineComponent, 
    ref, 
    reactive, 
    toRefs, 
    computed,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
    } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
export default defineComponent({
  components: { HelloWorld },
  setup(){
      console.log("父组件setup");
      let name = ref("");
      let changeName = () =>{
          name.value = "test"
      }

      onBeforeMount(()=>{
          console.log("父组件dom元素挂载前触发");
      })
      onMounted(()=>{
          console.log('父组件dom元素挂载后触发');
      })
      onBeforeUpdate(()=>{
          console.log('父组件数据更新前触发');
      })
      onUpdated(()=>{
          console.log('父组件数据更新后触发');
      })
      onBeforeUnmount(()=>{
          console.log('父组件组件销毁前触发');
      })
      onUnmounted(()=>{
          console.log('父组件组件销毁后触发');
      })
      
    
    return{
        name,
        changeName,
    
    }
  },
});
</script>

<style scoped >

</style>
